<template>
  <view class="reservation">
    <PageWarpper :page-name="pageName[status]">
      <template v-slot:main>
        <view class="intro" v-if="!status">
          <view class="notice">自习室介绍</view>
          <label for="tip" class="siyuan-medium">二维码开门</label>
          <image
            src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/logo.png"
            mode="widthFix"
          ></image>
        </view>
        <view v-else class="reservation-order-info border-top">
          <view class="count-down border-bottom" v-if="status == 1">
            <view class="count-down-item d-flex">
              <text class="intel-one-mono-medium">15</text>
              <text class="siyuan-medium">时</text>
            </view>
            <view class="count-down-item d-flex">
              <text class="intel-one-mono-medium">15</text>
              <text class="siyuan-medium">分</text>
            </view>
            <view class="count-down-item d-flex">
              <text class="intel-one-mono-medium">15</text>
              <text class="siyuan-medium">秒</text>
            </view>
          </view>
          <OrderCell
            class="order-cell"
            :list="status == 1 ? orderInfo.slice(0, 3) : orderInfo.slice(0, 4)"
          />
          <Pay v-if="status == 2" />
          <view class="sum border-bottom d-flex" v-else>
            <text class="siyuan-medium">合计</text>
            <label for="price" class="siyuan-medium">
              ￥
              <text class="intel-one-mono-medium">10.00</text>
            </label>
          </view>
          <view class="options" :class="{ 'custom-options': status == 1 }">
            <view class="service" v-if="status == 2">购票即代表阅读并同意《服务条款》</view>
            <button class="black-btn">{{ status == 2 ? "确认支付" : "立即支付" }}</button>
          </view>
        </view>
      </template>
    </PageWarpper>
  </view>
</template>

<script setup>
import { ref } from "vue";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import OrderCell from "@/components/List/OrderCell.vue";
import Pay from "@/components/Modules/Pay.vue";

let status = ref(1); //0:待入场，1:订单确认 2:订单支付
let pageName = ref(["共享自习室", "待结订单", "自习室预约"]);

let orderInfo = ref([
  { name: "自习室使用时长", feile: "room_use_time", data: "2024-09-06  12:23:21" },
  { name: "开始时间", feile: "room_start_time", data: "2024-09-06  12:23:21" },
  { name: "结束时间", feile: "room_end_time", data: "2024-09-06  12:23:21" },
  { name: "合计", feile: "sum", data: "10.00" },
]);


</script>

<style lang="scss" scoped>
.intro {
  .notice {
    padding: 24rpx;
    background-color: #f2f2f2;
    font-size: 24rpx;
    line-height: 30rpx;
  }
  label[for="tip"] {
    display: block;
    padding: 66rpx 0 44rpx 36rpx;
    font-size: 26rpx;
  }
  image {
    width: 304rpx;
    margin-left: calc(50% - 152rpx);
  }
}
.reservation-order-info {
  ::v-deep .order-groups {
    padding-top: 64rpx;
    padding-bottom: 64rpx;
  }
  .count-down {
    padding: 38rpx 134rpx;
    display: grid;
    grid-template-columns: repeat(3, 102rpx);
    grid-template-rows: 102rpx;
    align-content: space-between;
    justify-content: space-between;
    background-color: #f2f2f2;
    .count-down-item {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      background-color: #ffffff;
      font-size: 18rpx;
      text:first-child {
        margin-bottom: 10rpx;
        font-size: 40rpx;
      }
    }
  }
  .sum {
    height: 102rpx;
    padding: 0 28rpx;
    align-items: center;
    justify-content: space-between;
    background-color: #f2f2f2;
    font-size: 24rpx;
    label > text {
      margin-left: 36rpx;
      font-size: 26rpx;
    }
  }
  .options {
    text-align: center;
    .service {
      margin-top: 186rpx;
      margin-bottom: 32rpx;
      font-size: 20rpx;
    }
    button {
      width: 300rpx;
      height: 102rpx;
      line-height: 102rpx;
    }
  }
  .options.custom-options {
    text-align: right;
    button {
      width: 300rpx;
      margin-top: 234rpx;
    }
  }
}
</style>
